<template>
	<view class="wrap">
		<view class="uni-inline-item">
			<text>状态:</text>
			<view class="banjiebox" v-if="repairData.bx_status === '已办结'">
				<text>已办结</text>
				<navigator v-show="isShow" class="banjie" :url="'../evaluate/evaluate?id=' + reqData.id">评价</navigator>
			</view>
			<text v-else-if="repairData.bx_status !== '已办结'">{{ repairData.bx_status }}</text>
		</view>
		<view class="uni-inline-item">
			<text>报修时间:</text>
			<text>{{ repairData.createTime }}</text>
		</view>
		<view class="uni-inline-item">
			<text>报修区域:</text>
			<text>{{ repairData.bxAreaName }}</text>
		</view>
		<view class="uni-inline-item">
			<text>报修设施:</text>
			<text>{{ repairData.bxItemName }}</text>
		</view>
		<view class="uni-inline-item">
			<text>故障描述:</text>
			<text>{{ repairData.bxContent }}</text>
		</view>
		<view class="pic">
			<view class="uni-title">图片:</view>
			<view class="uni-uploader__img" style="height: auto;"><image v-for="val in repairData.imgs" :src="val.imgUrl" mode="" :key="val.imgUrl"></image></view>
		</view>

		<view class="evaluateBox" v-show="repairData.bx_status === '已办结' && !isShow">
			<view class="title">报修评价</view>
			<view class="liao " v-show="evaluateData" v-for="val in evaluateData" :key="val.createTime">
				<text>报修人</text>
				<view>{{ val.esContent }}</view>
			</view>
			<view class="liao right" v-show="!evaluateData">
				<text>维修人</text>
				<view>谢谢你的评价</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { formatTimeToStr } from '@/components/date.js';
export default {
	computed: {
		...mapState(['TOKEN', 'UPDATE', 'URL'])
	},
	data() {
		return {
			isShow: false,
			repairData: {
				bxAreaName: '西校区/越千年',
				bxItemName: '空调/空调滤芯',
				bxContent: '坏了',
				bxRoomnum: '502',
				bx_status: '登记',
				bxUser: '打电话',
				createTime: 1553844807000,
				id: '20190329153326939679995.3052262824',
				procInstId: null,
				userPhone: '1301821994'
			},
			evaluateData: {},
			reqData: {
				id: ''
			}
		};
	},
	onShow() {
		console.log(this.UPDATE);
		if (this.UPDATE) {
			this.getRepairData();
			this.TO_UPDATE(false);
		}
	},
	onLoad(e) {
		this.reqData.id = e.id;
		this.getRepairData();
	},
	methods: {
		...mapMutations(['TO_UPDATE']),
		getRepairData() {
			uni.request({
				url: this.URL + 'bx/getMyBxDetail',
				data: this.reqData,
				header: {
					token: this.TOKEN
				},
				success: res => {
					console.log(res.data.data);
					this.repairData = res.data.data;
					this.repairData.createTime = formatTimeToStr(this.repairData.createTime, 'yyyy-MM-dd');
					if (this.repairData.bx_status === '已办结') {
						this.getEvaluateData();
					}
				}
			});
		},
		getEvaluateData() {
			uni.request({
				url: this.URL + 'bxTEstimate/getListByMainId',
				data: {
					mainId: this.repairData.id
				},
				header: {
					token: this.TOKEN
				},
				success: res => {
					console.log(res.data);
					if (res.data.data.length === 0) {
						this.isShow = true;
						console.log(111111111111);
					}
					this.evaluateData = res.data.data;
					console.log(res.data.data);
				}
			});
		}
	}
};
</script>

<style lang="scss">
.wrap {
	box-sizing: border-box;
	padding: 20upx;
	.uni-inline-item {
		line-height: 80upx;
		border-bottom: 1upx solid #e5e5e5;
		text {
			min-width: 180upx;
			color: slategrey;
			&:nth-of-type(1) {
				color: black;
			}
		}
		.banjiebox {
			display: flex;
			justify-content: space-between;
			flex: 1;
			.banjie {
				background: #007aff;
				color: white;
				padding: 2px 10px;
				border-radius: 5px;
			}
		}
	}
	.pic {
		display: flex;
		flex-direction: column;
		width: 710upx;
		.uni-uploader__img {
			box-sizing: border-box;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			image {
				margin: 18upx;
				width: 200upx;
				height: 200upx;
			}
		}
	}
	.evaluateBox {
		.title {
			font-size: 40upx;
			color: #6d6d72;
			text-align: center;
			border-bottom: 1upx solid slategrey;
		}
		.liao {
			padding-top: 20upx;
			width: 100%;
			text {
				border-bottom: 1upx solid #888888;
			}
			view {
				color: slategrey;
				padding: 0 40upx;
			}
		}
		.right {
			text-align: right;
		}
	}
	.evaluate {
		position: absolute;
		width: 100%;
		display: flex;
		height: 40px;
		left: 0px;
		input {
			padding-left: 10upx;
			background: #e5e5e5;
			height: 40px;
			flex: 4;
		}
	}
}
</style>
